// router/index.tsx - 路由配置文件
// 这个文件使用React Router v7定义应用的所有路由规则和页面导航结构

// 导入React Router的相关功能
// createBrowserRouter: 创建基于浏览器历史的路由器配置
// RouterProvider: 提供路由上下文给整个应用
// Navigate: 导航组件，用于重定向到其他路由
import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';

// 导入布局组件：主布局组件，包含侧边栏和顶部导航
import Layout from '@/layouts/index';

// 导入页面组件：各个路由对应的页面组件
import Login from '@/views/Login';          // 登录页面
import Home from '@/views/Home';            // 首页
import NotFound from '@/views/NotFound';    // 404页面

// 导入路由保护组件：用于验证用户权限，保护需要登录才能访问的路由
import ProtectedRoute from '@/components/ProtectedRoute';

// 导入卡片管理相关页面组件
import CardList from '@/views/card_manage/List';    // 卡片列表页面
import CardHolder from '@/views/card_manage/Holder'; // 持卡人管理页面
import CardBin from '@/views/card_manage/Bin';      // 卡片回收站页面
import CardApply from '@/views/card_manage/Apply';  // 卡片申请页面
import CardDetail from '@/views/card_manage/Detail'; // 卡片详情页面

// 导入资金管理相关页面组件
import FundRecharge from '@/views/fund_manage/Recharge'; // 资金充值页面
import FundDetails from '@/views/fund_manage/Details';   // 资金明细页面
import FundWithdraw from '@/views/fund_manage/Withdraw'; // 资金提现页面
import FundAudit from '@/views/fund_manage/Audit';       // 资金审核页面

// 创建路由配置：使用createBrowserRouter定义所有路由规则
// createBrowserRouter是React Router v7推荐的方式，支持数据加载、错误处理等高级功能
const router = createBrowserRouter([
  {
    path: '/login', // 路由路径：匹配/login
    element: <Login />, // 对应的组件：登录页面组件
  },
  {
    path: '/', // 根路径
    element: ( // 使用ProtectedRoute保护Layout，确保用户登录后才能访问
      <ProtectedRoute>
        <Layout /> {/* 主布局组件，包含公共的页面结构 */}
      </ProtectedRoute>
    ),
    children: [ // 子路由：在Layout组件内嵌套渲染
      {
        index: true, // 默认子路由：当路径为/时，渲染Home组件
        element: <Home />, // 首页组件
      },
      // 卡片管理路由组：所有卡片管理相关的路由都嵌套在/card_manage路径下
      {
        path: 'card_manage', // 路径：/card_manage
        children: [ // 卡片管理的子路由
          {
            index: true, // 默认路由：访问/card_manage时重定向到/card_manage/list
            element: <Navigate to="list" replace />, // 使用Navigate组件进行重定向
          },
          {
            path: 'list', // 路径：/card_manage/list
            element: <CardList />, // 卡片列表页面
          },
          {
            path: 'holder', // 路径：/card_manage/holder
            element: <CardHolder />, // 持卡人管理页面
          },
          {
            path: 'bin', // 路径：/card_manage/bin
            element: <CardBin />, // 卡片回收站页面
          },
          {
            path: 'apply', // 路径：/card_manage/apply
            element: <CardApply />, // 卡片申请页面
          },
          {
            path: 'detail', // 路径：/card_manage/detail
            element: <CardDetail />, // 卡片详情页面
          },
        ],
      },
      // 资金管理路由组：所有资金管理相关的路由都嵌套在/fund_manage路径下
      {
        path: 'fund_manage', // 路径：/fund_manage
        children: [ // 资金管理的子路由
          {
            index: true, // 默认路由：访问/fund_manage时重定向到/fund_manage/recharge
            element: <Navigate to="recharge" replace />, // 重定向到充值页面
          },
          {
            path: 'recharge', // 路径：/fund_manage/recharge
            element: <FundRecharge />, // 资金充值页面
          },
          {
            path: 'details', // 路径：/fund_manage/details
            element: <FundDetails />, // 资金明细页面
          },
          {
            path: 'withdraw', // 路径：/fund_manage/withdraw
            element: <FundWithdraw />, // 资金提现页面
          },
          {
            path: 'audit', // 路径：/fund_manage/audit
            element: <FundAudit />, // 资金审核页面
          },
        ],
      },
    ],
  },
  {
    path: '*', // 通配符路径：匹配所有未定义的路由
    element: <NotFound />, // 显示404页面组件
  },
]);

// 路由提供者组件：使用RouterProvider将路由配置提供给整个应用
// 这个组件应该在应用的根组件（App.tsx）中被渲染
export function Router() {
  // RouterProvider组件接收router配置，使所有子组件都能访问路由信息
  // 在React中，Provider模式用于跨组件传递数据，RouterProvider提供了路由上下文
  return <RouterProvider router={router} />;
}